<template>
	<view class="article-collection">
		<view class="list" v-if="articleList.length==0">
			数据为空
		</view>
		
		<view class="list" v-else>
			<view class="item" v-for="item in articleList" :key="item.id" @tap="toArticleInfo(item.id)">
				<image :src="item.coverImg" mode=""></image>
				<view class="name">
					{{item.title}}
				</view>
			</view>
			<view class="item">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				articleList: [],
			};
		},
		methods:{
			toArticleInfo(id) {
				uni.navigateTo({
					url: `/pages/find/find-article-info/find-article-info?articleId=${id}`,
				})
			},
		},
		onShow() {
			this.articleList = Object.values(uni.getStorageSync('articleCollect'))
			console.log(this.articleList);
		}
	}
</script>

<style lang="scss" scoped>
	.article-collection {
		.list {
			padding-top: 30rpx;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			.item {
				width: 334rpx;
				height: 320rpx;
				background-color: #fff;
				image{
					display: block;
					width: 100%;
					height: 240rpx;
				}
				
				.name{
					line-height: 80rpx;
					text-align: center;
					font-weight: 700;
				}
			}
			
			.item:last-child{
				height: 0;
			}
		}
	}
</style>
